<template>
  <div class="yardList">
    <el-row>
      <el-col class="header"
              :span="24">
        <el-button type="primary"
                   v-if="hasBackBtn"
                   @click="back"
                   class="float-right">返回
        </el-button>
        <el-button type="primary"
                   icon="el-icon-plus"
                   class="float-right"
                   @click="addYard()">添加</el-button>

        <el-button type="primary"
                   class="float-right"
                   @click="getData">查询</el-button>
        <el-input placeholder="请输入堆场名"
                  v-model="requestParam.name"
                  class="float-right normal-input"
                  @keyup.enter.native="getData"></el-input>
      </el-col>
      <el-col :span="24">
        <div class="project-name"
             v-show="projectName !='' ">项目名称：<span>{{projectName}}</span></div>
      </el-col>
      <el-col :span="24"
              id="midBox">
        <el-table :data="yardTable.list"
                  border
                  :header-cell-style="{background:'#f5f5f5'}">
          <el-table-column label="序号"
                           align="center"
                           show-overflow-tooltip>
            <template slot-scope="scope">
              <span>{{ scope.$index+(page - 1)*10 + 1 }}</span>
            </template>
          </el-table-column>
          <el-table-column label="堆场名称"
                           align="center"
                           show-overflow-tooltip>
            <template slot-scope="scope">
              <span>{{ scope.row.name }}</span>
            </template>
          </el-table-column>
          <el-table-column label="堆场长度(mm)"
                           align="center"
                           show-overflow-tooltip>
            <template slot-scope="scope">
              <span>{{ scope.row.length}}</span>
            </template>
          </el-table-column>
          <el-table-column label="堆场宽度(mm)"
                           align="center"
                           show-overflow-tooltip>
            <template slot-scope="scope">
              <span>{{ scope.row.width }}</span>
            </template>
          </el-table-column>
          <el-table-column label="更新时间"
                           align="center"
                           show-overflow-tooltip>
            <template slot-scope="scope">
              <span>{{ scope.row.created_at}}</span>
            </template>
          </el-table-column>
          <el-table-column label="操作"
                           width="185px"
                           align="center"
                           show-overflow-tooltip>
            <template slot-scope="scope">
              <el-button type="text"
                         @click="getYardDetail(scope.row)">详情</el-button>
              <el-button type="text"
                         @click="editYard(scope.row)">编辑</el-button>
              <el-button type="text"
                         @click="sureDelete(scope.row)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <el-dialog :title="yardState==='1'?'堆场详情':yardState==='2'?'编辑堆场':'添加堆场'"
                   width="40%"
                   class="yard-dialog"
                   :close-on-click-modal="false"
                   :close-on-press-escape="false"
                   @close="resetForm('yardform')"
                   :visible.sync="yardVisible">
          <AddModifyPreDialog :todos="todos"
                              :type="type"
                              :rowObj="rowObj"
                              :catchBack="catchBack"
                              :catchSave="catchSave">
          </AddModifyPreDialog>
        </el-dialog>
      </el-col>
      <el-col :span="24"
              class="yardList-bottom">
        <el-pagination @current-change="handleCurrentChange"
                       layout="total, sizes, prev, pager, next, jumper"
                       :current-page='yardTable.page'
                       :page-sizes="[10]"
                       background
                       :page-size="yardTable.pagesize"
                       :total='yardTable.totalCount'></el-pagination>
      </el-col>
    </el-row>
  </div>
</template>
<script>
import { factoryYardApi } from '@/services/ProjectCenter';
import { UploadFileApi } from '@/services/UserPermission';
import AddModifyPreDialog from './components/addModifyPreDialog';
export default {
  components: {
    AddModifyPreDialog
  },
  data () {

    return {
      type: 0,
      rowObj: {},
      todos: 0,
      yardTable: {
        list: [],
        totalCount: 0,
        pagesize: 10,
        page: 1
      },
      page: 1,
      yardName: '',
      requestParam: {
        project_id: '',
        company_id: '',
        name: ''
      },
      projectName: '',
      yardState: '',
      yardVisible: false, // 弹窗显示
      file_name: '', // 图片上传的地址
      deleteId: '',
      deleteName: '',
      btnLimit: false,
      // 是否从项目堆场页面跳转过来
      hasBackBtn: false
    }
  },
  methods: {
    //返回
    catchBack (val) {
      if (val == 'SUCCESS') {
        this.rowObj = {};
        this.type = 0;
        this.todos = 0;
        this.yardVisible = false;
      }
    },
    //保存
    catchSave (val) {
      if (val == 'SUCCESS') {
        this.rowObj = {};
        this.type = 0;
        this.todos = 0;
        this.getData();
        this.yardVisible = false;
      }
    },
    // 返回项目堆场
    back () {
      this.$router.push({
        path: '/projectYardList'
      })
    },
    // 获取堆场数据
    getData () {
      if (this.$route.query.projects) {
        factoryYardApi.getYardList({
          params: this.requestParam
        }).then(res => {
          this.yardTable.list = res.data.data
          this.yardTable.totalCount = res.data.total
        })
      } else {
        factoryYardApi.getYardList({
          params: this.requestParam
        }).then(res => {
          this.yardTable.list = res.data.data
          this.yardTable.totalCount = res.data.total
        })
      }
    },
    // 获取堆场详情数据
    getYardDetail (row) {
      this.type = 1;
      this.rowObj = row;
      this.todos = 1;
      this.yardState = '1'
      this.yardVisible = true
    },
    // 编辑堆场
    editYard (row) {
      this.type = 2;
      this.rowObj = row;
      this.todos = 1;
      this.yardState = '2';
      this.yardVisible = true;
    },
    // 添加堆场
    addYard () {
      this.type = 3;
      this.rowObj = {};
      this.todos = 1;
      this.yardState = '3';
      this.yardVisible = true;
    },
    // 确认删除堆场弹窗的确认按钮
    sureDelete (row) {
      this.$confirm('您确定删除"' + row.name + '"堆场?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
        left: true
      }).then(() => {
        this.btnLimit = true
        factoryYardApi.deleteYard({
          data: {
            id: row.id
          }
        }).then(res => {
          if (res.code == 0) {
            this.deleteVisible = false;
            this.$message.success('删除成功');
            this.getData();
            this.btnLimit = false;
          } else {
            this.btnLimit = false;
          }
        });
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },
    // 关闭弹窗重置表单
    resetForm (yardform) {
      this.rowObj = {};
      this.type = 0;
      this.todos = 0;
      this.yardVisible = false;
    },
    // 分页
    handleCurrentChange (page) {
      this.page = page
      this.getData()
    }
  },
  created () {
    this.requestParam.project_id = this.$route.query.projects
    if (this.$route.query.projects) {
      this.hasBackBtn = true
    } else {
      this.hasBackBtn = false
    }
    this.getData()
  }
}
</script>
<style lang="scss" scoped>
#midBox {
  margin-top: 20px;
}
.yardList {
  padding: 20px;
  .header {
    .float-right {
      margin-left: 10px;
    }
  }
  .project-name {
    margin-left: 5px;
    margin-top: 10px;
  }
  .project-name span {
    color: #666;
  }
  .normal-input {
    width: 200px;
  }
  .yard-input {
    width: 70%;
  }
  .delete-span {
    color: #1890ff;
    font-weight: bold;
  }
  .yard-dialog {
    /deep/ .el-dialog__body {
      padding-bottom: 0px;
    }
    .dialog-footer {
    }
  }
  .yardList-bottom {
    padding: 40px 0;
    text-align: center;
  }
}
/deep/ .avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>
